<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-02-01 15:49:30
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-07-23 10:24:40
 * @Description:
 *
-->

<template>
  <el-form
    ref="form"
    class="create-openstack"
    :rules="rules"
    :model="form"
    label-width="auto"
    size="medium"
  >
    <el-form-item
      v-if="scene != 'orchestrate'"
      class="item"
      label="云服务商"
      prop="cloudPlatform"
    >
      <el-select
        v-model="form.cloudPlatform"
        placeholder="请选择云服务商"
        style="width: 100%"
        :disabled="true"
      >
        <el-option
          v-for="item in cloudProviderOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item
      v-if="scene != 'orchestrate'"
      class="item"
      label="云账户"
      prop="cloudAccountName"
    >
      <el-select
        v-model="form.cloudAccountName"
        placeholder="请选择云账户"
        style="width: 100%"
        no-data-text="请先选择合适的云服务商"
        :loading="loadingCloudAccountName"
        @change="cloudAccountNameChange"
      >
        <el-option
          v-for="item in cloudAccountNameOptions"
          :key="item.cloudAccountName"
          :label="item.cloudAccountName"
          :value="item.cloudAccountName"
        />
      </el-select>
    </el-form-item>
    <el-form-item class="item" label="网络名称" prop="name">
      <el-input v-model="form.name" placeholder="请输入网络名称" />
    </el-form-item>
    <el-form-item class="item" label="可用域" prop="zone">
      <el-select
        v-model="form.zone"
        placeholder="请选择可用域"
        style="width: 100%"
        no-data-text="请先选择云账户"
      >
        <el-option
          v-for="item in zoneOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item class="item" label="网络类型" prop="networkType">
      <el-row type="flex" align="middle">
        <el-select
          v-model="form.networkType"
          placeholder="请选择网络类型"
          style="width: 100%"
          @change="networkTypeChange"
        >
          <el-option
            v-for="item in networkTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-popover placement="right" width="300" trigger="hover">
          <p
            v-html="
              '创建外部网络时，请选择网络类型Flat，物理网络填写provider。<br/>创建内部网络时，请选择网络类型VXLAN，段ID有效值为1到16777215。'
            "
          ></p>
          <i
            slot="reference"
            class="el-icon-info icon"
            style="font-size: 18px; margin-left: 10px"
          ></i>
        </el-popover>
      </el-row>
    </el-form-item>
    <template v-if="form.networkType == 'Flat'">
      <el-form-item
        id="flatPhysicalNetwork"
        class="item"
        label="物理网络"
        prop="physicalNetwork"
      >
        <el-input v-model="form.physicalNetwork" placeholder="请输入物理网络" />
      </el-form-item>
    </template>
    <template v-if="form.networkType == 'VLAN'">
      <el-form-item
        id="VLANPhysicalNetwork"
        class="item"
        label="物理网络"
        prop="physicalNetwork"
      >
        <el-input v-model="form.physicalNetwork" placeholder="请输入物理网络" />
      </el-form-item>
      <el-form-item
        id="VLANSegmentationId"
        class="item"
        label="段ID"
        prop="segmentationId"
      >
        <el-input v-model="form.segmentationId" placeholder="请输入段ID" />
      </el-form-item>
    </template>
    <template v-if="form.networkType == 'VXLAN'">
      <el-form-item
        id="VXLANSegmentationId"
        class="item"
        label="段ID"
        prop="segmentationId"
      >
        <el-input v-model="form.segmentationId" placeholder="请输入段ID" />
      </el-form-item>
    </template>
    <el-form-item class="item" label="是否共享" prop="shared">
      <el-select
        v-model="form.shared"
        placeholder="请选择是否共享"
        style="width: 100%"
      >
        <el-option
          v-for="item in sharedOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item class="item" label="外部网络" prop="external">
      <el-select
        v-model="form.external"
        placeholder="请选择外部网络"
        style="width: 100%"
      >
        <el-option
          v-for="item in externalOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item class="item" label="管理状态" prop="adminState">
      <el-select
        v-model="form.adminState"
        placeholder="请选择管理状态"
        style="width: 100%"
      >
        <el-option
          v-for="item in adminStateOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="描述" prop="desc">
      <el-input
        v-model="form.desc"
        placeholder="请输入描述"
        type="textarea"
        :rows="3"
      />
    </el-form-item>
  </el-form>
</template>

<script>
import { getPrivateZones } from '@/api/cn-resource'
import resSelectorMixin from '@/views/mixin/resSelector.js'

export default {
  name: 'CreateOpenstack',
  components: {},
  mixins: [resSelectorMixin],
  props: {
    cloudSelect: {
      type: String,
      default: 'Openstack'
    },
    scene: {
      type: String,
      default: 'create'
    },
    info: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      privateUseProvider: false,
      cloudProviderType: 'private',
      skipGetCloudAccount: false,
      zoneOptions: [],
      networkTypeOptions: [
        {
          label: 'Flat',
          value: 'Flat'
        },
        {
          label: 'VLAN',
          value: 'VLAN'
        },
        {
          label: 'VXLAN',
          value: 'VXLAN'
        }
      ],
      sharedOptions: [
        {
          label: '是',
          value: '是'
        },
        {
          label: '否',
          value: '否'
        }
      ],
      externalOptions: [
        {
          label: '是',
          value: '是'
        },
        {
          label: '否',
          value: '否'
        }
      ],
      adminStateOptions: [
        {
          label: 'UP',
          value: 'UP'
        },
        {
          label: 'DOWN',
          value: 'DOWN'
        }
      ],
      form: {
        cloudPlatform: '',
        cloudAccountName: '',
        name: '',
        zone: '',
        networkType: '',
        physicalNetwork: '',
        segmentationId: '',
        shared: '否',
        external: '否',
        adminState: 'UP',
        desc: ''
      },
      // 校验规则
      rules: {
        cloudPlatform: [
          { required: true, message: '请选择云服务商', trigger: 'change' }
        ],
        cloudAccountName: [
          { required: true, message: '请选择云账户', trigger: 'change' }
        ],
        name: [{ required: true, message: '请输入网络名称', trigger: 'blur' }],
        // zone: [{ required: true, message: '请选择可用域', trigger: 'change' }],
        networkType: [
          { required: true, message: '请选择网络类型', trigger: 'change' }
        ],
        physicalNetwork: [
          { required: true, message: '请输入物理网络', trigger: 'blur' }
        ],
        segmentationId: [
          { required: true, message: '请输入段ID', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {},
  watch: {
    /**
     * @description: 监听
     * @return {*}
     */
    info: {
      handler(newVal) {
        if (newVal) {
          this.form = Object.assign(this.form, this.info)
        }
      },
      immediate: true,
      deep: true
    },
    /**
     * @description: 云账户监听
     * @return {*}
     */
    'form.cloudAccountName': {
      handler(newVal) {
        if (newVal) {
          // 请求可用域
          this.getPrivateZones()
        }
      },
      immediate: true
    },
    cloudSelect: {
      handler(newVal) {
        if (newVal) {
          this.form.cloudPlatform = this.cloudSelect
        }
      },
      immediate: true
    }
  },
  created() {
    this.skipGetCloudAccount = this.scene === 'orchestrate'
  },
  methods: {
    /**
     * @description: 网络类型切换
     * @param {*} val
     * @return {*}
     */
    networkTypeChange(val) {
      this.form.physicalNetwork = ''
      this.form.segmentationId = ''
    },
    /**
     * @description: 云账户切换
     * @param {*} val
     * @return {*}
     */
    cloudAccountNameChange(val) {
      this.form.zone = ''
    },
    /**
     * @description: 获取私有云可用域
     * @return {*}
     */
    getPrivateZones() {
      getPrivateZones({
        cloudAccountName: this.form.cloudAccountName
      }).then((res) => {
        const zones =
          res.data && Array.isArray(res.data.zones) ? res.data.zones : []
        this.zoneOptions = zones.map((item) => {
          return {
            value: item,
            label: item
          }
        })
      })
    },
    /**
     * @description: 校验
     * @return {*}
     */
    validateForm(callback) {
      this.$refs.form.validate((valid, obj) => {
        if (valid) {
          callback(this.form)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.create-openstack {
  .item {
    display: inline-block;
    width: calc(50% - 10px);
    &:nth-child(2n) {
      margin-left: 20px;
    }
  }
}
</style>
